<template>
	<view class="service">
		<!-- 导航 -->
		<!-- #ifndef MP-WEIXIN -->
		<!-- <public-header :title="title"></public-header>
		<view class="hei_100"></view> -->
		 <!-- #endif -->
		<!-- end -->
		
		<!-- 分类 -->
		<view class="classify">
			<!-- 一级 -->
			<view class="nav">
				<view v-for="(item1,i) in tabs" :key="i" :data-id="i" :data-type='item1.id' :class="{'act': tabCur == i}" @tap="tabSelect">
					<text></text>
					{{item1.name}}
				</view>
			</view>
			<!-- 二级 -->
			<view class="nav_cont">
				<view v-for="(item, index) in nav" :key="index" class="clearfix router">
					<view @click="tolist(item)">
					<!-- <router-link :to="{path: '/pages/service/list', query: {uid: 1}}"> -->
						<image :src="item.icon" mode="aspectFill" class="fl"></image>
						<view class="fl cont">
							<view class="title">{{item.name}}</view>
							<view>{{item.description}}</view>
							<view class="price">¥ {{item.univalence}}{{item.univalenceUnit}}</view>
						</view>
					<!-- </router-link> -->
					</view>
				</view>
			</view>
			<view v-if="nav.length==0" class="none">
				<view class="none-body" style="margin-left: 14%;">
					<cover-image class="none-image" src="../../static/images/null.png"></cover-image>
					<view class="none-text">暂无数据</view>
				</view>
			</view>
		</view>
		<!-- end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabCur:'',
				tabs:[],
				nav:[]
			}
		},
		onLoad(){
			var _this = this
			// 一级分类
			_this.$http
				.get('/traffic/pump/over')
				.then(function(response) {
					_this.tabs = response.data
					console.log(_this.tabs,"_this.tabs")
					// 二级分类
					_this.$http
						.get('/business/queryresults/' + _this.tabs[0].id)
						.then(function(response) {
							_this.nav = response.data
							console.log(response.data)
						})
						.catch(function(error) {
							console.log(error);
						});
				})
				.catch(function(error) {
					console.log(error);
				});
		},
		methods: {
			getquery(id) {
				let query = {uid: id}
				return query
			},
			tolist(item) {
				uni.navigateTo({
					url: '/pageageA/pages/service/list?id=' + item.id,
				})
			},
			tabSelect(e){
				var _this = this
				_this.tabCur = e.target.dataset.id;
				_this.$http
					.get('/business/queryresults/' + e.target.dataset.type)
					.then(function(response) {
						_this.nav = response.data
						console.log(response.data)
					})
					.catch(function(error) {
						console.log(error);
					});
			}
		}
	}
</script>

<style scoped lang="scss">
/* 导航 */
.header {
	height: 95rpx;
	width: 100%;
	background: #fff;
	line-height: 95rpx;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	font-size: 36rpx;
	text-align: center;
}
/* 分类 */
.classify .nav{
	background: #F5F7F8;
	width: 200rpx;
	position: fixed;
	top: 0rpx;
	left: 0;
	bottom: 0;
}
.classify .nav view{
	height: 106rpx;
	line-height: 106rpx;
	text-align: center;
	color: #666;
	font-size: 28rpx;
	font-weight: 400;
}
.classify .nav .act{
	background-color: #fff;
	color: #333;
	font-weight: 500;
	position: relative;
}
.classify .nav .act text{
	width:10rpx;
	height:60rpx;
	background:$uni-color1;
	border-radius:0px 100rpx 100rpx 0px;
	position: absolute;
	left: 0;
	top: 23rpx;
}
.nav_cont{
	margin-left: 220rpx;
	width: 530rpx;
}
.nav_cont .router{
	border-bottom: 1rpx solid #dfdfdf;
	padding: 36rpx 0 150rpx 0;
}
.nav_cont .router image{
	width: 144rpx;
	height: 134rpx;
	margin-right: 17rpx;
}
.nav_cont .router .cont{
	width: 312rpx;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
	color: #999;
	font-size: 24rpx;
	line-height: 33rpx;
}
.nav_cont .router .cont .title{
	color: #333;
	font-size: 28rpx;
	line-height: 40rpx;
	margin-bottom: 5rpx;
	font-weight: 500;
}
.nav_cont .router .cont .price{
	color: #FF3428;
	font-size: 32rpx;
	font-weight: 500;
	margin-top: 18rpx;
}
</style>
